import IconFont from '@/components/IconFont';
import CommonInputNumber from '@/pages/OrderModule/common/components/CommonInputNumber';
import CommonTable from '@/pages/OrderModule/common/components/CommonTable/components/CommonTable';
import Typography from '@/pages/OrderModule/common/components/Typography';
import { Popover, Tabs } from 'antd';
import { GoodField, GoodHead } from 'bizcomponents/Goods';
const { TabPane } = Tabs;
const SelectPackaging = ({}) => {
    const [tab, setTab] = useState('0');
    const [imageShowConfig, setImageShowConfig] = useState({
        image: 'small',
        info: ['name', 'color', 'goods', 'style'],
        all: false,
    });
    const baseTableColumns = [
        {
            title: '序号',
            dataIndex: 'field1',
        },
        {
            title: (<>
          <Typography as="s2" useBold>
            包装
          </Typography>
          <Popover placement="bottom" content={<GoodHead initValues={imageShowConfig} onChange={setImageShowConfig}/>} overlayStyle={{ width: 250 }}>
            <span>
              <IconFont type="iconarrow-down"/>
            </span>
          </Popover>
        </>),
            dataIndex: 'field7',
            render(value, record) {
                return (<GoodField record={{
                        image: record.image,
                        name: record.name,
                        count: record.count,
                        color: record.color,
                        goods: record.goods,
                        style: record.style,
                    }} style={record.style} config={imageShowConfig}/>);
            },
        },
        {
            title: '商品编码',
            dataIndex: 'field8',
        },
        {
            title: '款式编码',
            dataIndex: 'field9',
            render(value, record) {
                return <span style={{ color: '#f00' }}>{value}</span>;
            },
        },
    ];
    return (<Tabs defaultActiveKey="0" onChange={(val) => {
            setTab(val);
        }}>
      <TabPane tab="订单基础设置" key="0">
        <CommonTable columns={baseTableColumns.concat([
            {
                title: '数量',
                dataIndex: 'field10',
                render(value, record) {
                    return <CommonInputNumber placeholder="请输入数量" controls={false}/>;
                },
            },
        ])} dataSource={[]} scroll={{ x: 'max-content' }} rowSelection={{
            type: 'checkbox',
        }}/>
      </TabPane>
    </Tabs>);
};
export default memo(ResetStyle(SelectPackaging, { wrappers: ['rule-reset'] }));
